<template>
  <div class="view">
    <div style="display: flex; flex-direction: column">
      <div :style="circleColor1" class="circle1"></div>
      <div :style="circleColor1" class="circle2"></div>
    </div>
    <div>
      <div class="total_fuel">
        <div>
          <span class="total_font">TOTAL</span>
          <span style="margin-top: -12px" class="total_font">FUEL</span>
        </div>
        <h2 style="margin-left: 15px">145.5</h2>
      </div>
      <span style="font-size: 16px; font-weight: 600; color: rgb(8, 214, 255); margin-left: 65px"
        >KG&nbsp;&nbsp;X&nbsp;&nbsp;1000</span
      >
      <div
        style="width: 100px; height: 100px; margin-left: 35px; margin-top: 20px; padding-top: 20px"
      >
        <div :style="crossColor" class="cross_feed">
          CROSSFEED
          <div class="inner-box_1"></div>
          <div class="cross_bottom_1"></div>
          <div class="cross_bottom_2"></div>
          <div class="inner-box_2"></div>
          <div class="cross_line1"></div>
          <div class="cross_line2"></div>
        </div>
      </div>
      <span
        style="
          display: block;
          font-size: 16px;
          font-weight: 600;
          color: rgb(8, 214, 255);
          margin-left: 78px;
          margin-top: 10px;
        "
        >CENTER</span
      >
      <div class="center_tank">
        <div style="display: flex">
          <div style="margin-top: -2px; margin-left: 19px">
            <span :style="cLeftColor" style="font-weight: 600; margin-left: 20px">L</span>
            <div :style="leftPumpStyle" class="center_l"></div>
          </div>
          <div style="margin-top: -2px; margin-left: 34px">
            <span :style="cRightColor" style="font-weight: 600; margin-left: 20px">R</span>
            <div :style="rightPumpStyle" class="center_2"></div>
          </div>
        </div>
        <div :style="fontColor" class="center_fuel_total">82.9</div>
      </div>
    </div>
    <div style="display: flex; flex-direction: column; margin-left: 3px">
      <div :style="circleColor2" class="circle1"></div>
      <div :style="circleColor2" class="circle2"></div>
    </div>
    <canvas ref="canvasRef" width="290" height="350"></canvas>
  </div>
</template>

<script setup>
import { onMounted, ref, watch, reactive, defineProps } from 'vue'
import { useStore } from 'vuex'

const store = useStore()
const canvasRef = ref(null)

const leftPumpStyle = reactive({
  border: '3px solid rgb(8, 255, 66)'
})
const rightPumpStyle = reactive({
  border: '3px solid rgb(8, 255, 66)'
})

const fontColor = reactive({
  color: 'white'
})

const circleColor1 = reactive({
  border: '2px solid rgb(8, 255, 66)'
})

const circleColor2 = reactive({
  border: '2px solid rgb(8, 255, 66)'
})

let height = 0
let width = 0

const props = defineProps({
  cLeftColor: {
    type: Object,
    default: {
      color: 'rgb(8, 214, 255)'
    }
  },
  cRightColor: {
    type: Object,
    default: {
      color: 'rgb(8, 214, 255)'
    }
  },
  crossColor: {
    type: Object,
    default: {
      color: 'rgb(8, 214, 255)'
    }
  }
})

// #region 注释部分
// // 监视每个 prop 的变化
// watch(
//   () => store.state.fwdCrossValve,
//   (newVal, oldVal) => {
//     watchAndDraw(newVal)
//   }
// )

// watch(
//   () => store.state.aftCrossValve,
//   (newVal, oldVal) => {
//     watchAndDraw(newVal)
//   }
// )

// watch(
//   () => store.state.cLeftPump,
//   (newVal, oldVal) => {
//     watchAndDraw(newVal)
//   }
// )

// watch(
//   () => store.state.cRightPump,
//   (newVal, oldVal) => {
//     watchAndDraw(newVal)
//   }
// )

// watch(
//   () => store.state.lFwdPump,
//   (newVal, oldVal) => {
//     if (!newVal) {
//     }
//     watchAndDraw(newVal)
//   }
// )

// watch(
//   () => store.state.lAftPump,
//   (newVal, oldVal) => {
//     if (!newVal) {
//     }
//     watchAndDraw(newVal)
//   }
// )

// watch(
//   () => store.state.rFwdPump,
//   (newVal, oldVal) => {
//     watchAndDraw(newVal)
//   }
// )

// watch(
//   () => store.state.rAftPump,
//   (newVal, oldVal) => {
//     watchAndDraw(newVal)
//   }
// )
// #endregion

watch(
  () => store.state,
  () => {
    drawCanvas()
  },
  { deep: true }
)

const watchAndDraw = (newVal) => {
  const canvas = canvasRef.value
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d')
    drawLeftPump()
    drawRightPump()
    if (newVal) {
      drawCanvas()
    } else {
      setTimeout(() => {
        drawCanvas()
      }, 2000)
    }
  }
}

onMounted(() => {
  drawCanvas()
})

/**
 *
 * @param ctx 画燃油管路
 */
const drawFuelLine = (ctx) => {
  // #region

  const cLeftPump = store.getters['fuel/cLeftPump']
  const cRightPump = store.getters['fuel/cRightPump']
  const fwdCrossValve = store.getters['fuel/fwdCrossValve']
  const aftCrossValve = store.getters['fuel/aftCrossValve']
  const lFwdPump = store.getters['fuel/lFwdPump']
  const lAftPump = store.getters['fuel/lAftPump']
  const rFwdPump = store.getters['fuel/rFwdPump']
  const rAftPump = store.getters['fuel/rAftPump']

  circleColor1.border = '2px solid rgb(8, 255, 66)'
  if (cLeftPump) {
    //如果中央邮箱左泵在工作，那么左油路保持初始状态，因为默认使用中央油箱的油
    ctx.beginPath()
    ctx.moveTo(25, 30)
    ctx.lineTo(25, height * 0.82) // 用 lineTo 连接点
    ctx.lineWidth = 10
    ctx.strokeStyle = 'rgb(8, 255, 66)'
    ctx.stroke()
    ctx.closePath()
    ctx.beginPath()
    // 绘制第一条圆弧
    ctx.arc(30, height * 0.82, 5, Math.PI * 1, Math.PI * 0.5, true) // 半径设置为 40，确保是像素值
    ctx.lineWidth = 10
    ctx.strokeStyle = 'rgb(8, 255, 66)'
    ctx.stroke()
    ctx.moveTo(30, height * 0.82 + 5)
    ctx.lineTo(width * 0.43, height * 0.82 + 5)
    ctx.lineWidth = 10
    ctx.strokeStyle = 'rgb(8, 255, 66)'
    ctx.stroke()
    ctx.closePath()
  } else {
    ctx.beginPath()
    ctx.moveTo(25, 270)
    ctx.lineTo(25, 291) // 用 lineTo 连接点
    ctx.lineWidth = 2
    ctx.strokeStyle = 'rgb(255, 255, 255)'
    ctx.stroke()
    ctx.closePath()
    // 绘制第一条圆弧
    ctx.beginPath()
    ctx.arc(26, 291, 1, Math.PI * 2, Math.PI * 1, false) // 半径设置为 40，确保是像素值
    ctx.lineWidth = 2
    ctx.strokeStyle = 'rgb(255, 255, 255)'
    ctx.stroke()
    ctx.closePath()
    ctx.beginPath()
    ctx.moveTo(25, 292)
    ctx.lineTo(125, 292)
    ctx.lineWidth = 2
    ctx.strokeStyle = 'rgb(255, 255, 255)'
    ctx.stroke()
    ctx.closePath()
    //判断左后燃油泵的状态
    if (lAftPump) {
      //如果左后燃油泵工作，且中央油箱油泵不工作，则打通左后燃油泵管路
      ctx.beginPath()
      ctx.arc(20, 264, 10, 0, Math.PI * 1, false)
      ctx.fillStyle = 'rgb(8,255,66)' // 设置填充颜色
      ctx.fill() // 填充圆形
      ctx.closePath()
      ctx.beginPath()
      ctx.moveTo(25, 264)
      ctx.lineTo(25, 30)
      ctx.lineWidth = 10
      ctx.strokeStyle = 'rgb(8, 255, 66)'
      ctx.stroke()
      ctx.closePath()
    } else {
      ctx.beginPath()
      ctx.moveTo(25, 269)
      ctx.lineTo(20, 269)
      ctx.lineWidth = 2
      ctx.strokeStyle = 'rgb(255, 255, 255)'
      ctx.stroke()
      ctx.moveTo(25, 270)
      ctx.lineTo(25, 217)
      ctx.lineWidth = 2
      ctx.strokeStyle = 'rgb(255, 255, 255)'
      ctx.stroke()
      ctx.closePath()
      if (lFwdPump) {
        //如果左前燃油泵工作，且中央油箱油泵不工作，则打通左前燃油泵管路
        ctx.beginPath()
        ctx.arc(20, 211, 10, 0, Math.PI * 1, false)
        ctx.fillStyle = 'rgb(8,255,66)' // 设置填充颜色
        ctx.fill() // 填充圆形
        ctx.closePath()
        ctx.beginPath()
        ctx.moveTo(25, 216)
        ctx.lineTo(25, 30)
        ctx.lineWidth = 10
        ctx.strokeStyle = 'rgb(8, 255, 66)'
        ctx.stroke()
        ctx.closePath()
      } else {
        ctx.beginPath()
        ctx.moveTo(25, 216)
        ctx.lineTo(20, 216)
        ctx.lineWidth = 2
        ctx.strokeStyle = 'rgb(255, 255, 255)'
        ctx.stroke()
        ctx.moveTo(25, 217)
        ctx.lineTo(25, 174)
        ctx.lineWidth = 2
        ctx.strokeStyle = 'rgb(255, 255, 255)'
        ctx.stroke()
        ctx.closePath()
        if (fwdCrossValve || aftCrossValve) {
          //这里还要判断其他燃油泵有没有接通
          if (rAftPump || rFwdPump || cRightPump) {
            ctx.beginPath()
            ctx.arc(30, 168, 10, Math.PI * 1, 0, true)
            ctx.fillStyle = 'rgb(8,255,66)' // 设置填充颜色
            ctx.fill() // 填充圆形
            ctx.closePath()
            ctx.beginPath()
            ctx.moveTo(25, 168)
            ctx.lineTo(25, 30)
            ctx.lineWidth = 10
            ctx.strokeStyle = 'rgb(8, 255, 66)'
            ctx.stroke()
            ctx.closePath()
          } else {
            ctx.beginPath()
            ctx.moveTo(25, 174)
            ctx.lineTo(25, 30)
            ctx.lineWidth = 2
            ctx.strokeStyle = 'rgb(255, 255, 255)'
            ctx.stroke()
            ctx.closePath()
            ctx.beginPath()
            ctx.moveTo(26, 172)
            ctx.lineTo(30, 172)
            ctx.lineWidth = 2
            ctx.strokeStyle = 'rgb(255, 255, 255)'
            ctx.stroke()
            ctx.closePath()
            circleColor1.border = '2px solid rgb(255, 255, 255)'
          }
        } else {
          ctx.beginPath()
          ctx.moveTo(25, 174)
          ctx.lineTo(25, 30)
          ctx.lineWidth = 2
          ctx.strokeStyle = 'rgb(255, 255, 255)'
          ctx.stroke()
          ctx.closePath()
          ctx.beginPath()
          ctx.moveTo(26, 172)
          ctx.lineTo(30, 172)
          ctx.lineWidth = 2
          ctx.strokeStyle = 'rgb(255, 255, 255)'
          ctx.stroke()
          ctx.closePath()
          circleColor1.border = '2px solid rgb(255, 255, 255)'
        }
      }
    }
  }
  // #endregion

  circleColor2.border = '2px solid rgb(8, 255, 66)'
  if (cRightPump) {
    ctx.beginPath()
    ctx.moveTo(265, 30)
    ctx.lineTo(265, 287) // 用 lineTo 连接点
    ctx.lineWidth = 10
    ctx.strokeStyle = 'rgb(8, 255, 66)'
    ctx.stroke()
    ctx.closePath()
    ctx.beginPath()
    // 绘制第二条圆弧
    ctx.arc(260, 287, 5, Math.PI * 2, Math.PI * 0.5, false) // 半径设置为 40，确保是像素值
    ctx.lineWidth = 10
    ctx.strokeStyle = 'rgb(8, 255, 66)'
    ctx.stroke()
    ctx.moveTo(260, height * 0.82 + 5)
    ctx.lineTo(165, 292)
    ctx.lineWidth = 10
    ctx.strokeStyle = 'rgb(8, 255, 66)'
    ctx.stroke()
    ctx.closePath()
  } else {
    ctx.beginPath()
    ctx.moveTo(165, 292)
    ctx.lineTo(265, 292)
    ctx.lineWidth = 2
    ctx.strokeStyle = 'rgb(255, 255, 255)'
    ctx.stroke()
    ctx.moveTo(265, 292)
    ctx.lineTo(265, 270)
    ctx.lineWidth = 2
    ctx.strokeStyle = 'rgb(255, 255, 255)'
    ctx.stroke()
    ctx.closePath()
    if (rAftPump) {
      ctx.beginPath()
      ctx.arc(270, 264, 10, Math.PI * 1, 0, true)
      ctx.fillStyle = 'rgb(8,255,66)' // 设置填充颜色
      ctx.fill() // 填充圆形
      ctx.closePath()
      ctx.beginPath()
      ctx.moveTo(265, 265)
      ctx.lineTo(265, 30)
      ctx.lineWidth = 10
      ctx.strokeStyle = 'rgb(8, 255, 66)'
      ctx.stroke()
      ctx.closePath()
    } else {
      ctx.beginPath()
      ctx.moveTo(265, 269)
      ctx.lineTo(270, 269)
      ctx.lineWidth = 2
      ctx.strokeStyle = 'rgb(255,255,255)'
      ctx.stroke()
      ctx.moveTo(265, 270)
      ctx.lineTo(265, 216)
      ctx.lineWidth = 2
      ctx.strokeStyle = 'rgb(255,255,255)'
      ctx.stroke()
      ctx.closePath()
      if (rFwdPump) {
        ctx.beginPath()
        ctx.arc(270, 211, 10, Math.PI * 1, 0, true)
        ctx.fillStyle = 'rgb(8,255,66)' // 设置填充颜色
        ctx.fill() // 填充圆形
        ctx.closePath()
        ctx.beginPath()
        ctx.moveTo(265, 211)
        ctx.lineTo(265, 30)
        ctx.lineWidth = 10
        ctx.strokeStyle = 'rgb(8, 255, 66)'
        ctx.stroke()
        ctx.closePath()
      } else {
        ctx.beginPath()
        ctx.moveTo(264, 216)
        ctx.lineTo(270, 216)
        ctx.lineWidth = 2
        ctx.strokeStyle = 'rgb(255,255,255)'
        ctx.stroke()
        ctx.moveTo(265, 216)
        ctx.lineTo(265, 172)
        ctx.lineWidth = 2
        ctx.strokeStyle = 'rgb(255,255,255)'
        ctx.stroke()
        ctx.closePath()
        if (fwdCrossValve || aftCrossValve) {
          if (lAftPump || lFwdPump || cLeftPump) {
            ctx.beginPath()
            ctx.arc(260, 168, 10, Math.PI, 0, true)
            ctx.fillStyle = 'rgb(8,255,66)' // 设置填充颜色
            ctx.fill() // 填充圆形
            ctx.closePath()
            ctx.beginPath()
            ctx.moveTo(265, 168)
            ctx.lineTo(265, 30)
            ctx.lineWidth = 10
            ctx.strokeStyle = 'rgb(8,255,66)'
            ctx.stroke()
            ctx.closePath()
          } else {
            ctx.beginPath()
            ctx.moveTo(265, 172)
            ctx.lineTo(265, 30)
            ctx.lineWidth = 2
            ctx.strokeStyle = 'rgb(255,255,255)'
            ctx.stroke()
            ctx.closePath()
            circleColor2.border = '2px solid rgb(255, 255, 255)'
          }
        } else {
          ctx.beginPath()
          ctx.moveTo(265, 172)
          ctx.lineTo(265, 30)
          ctx.lineWidth = 2
          ctx.strokeStyle = 'rgb(255,255,255)'
          ctx.stroke()
          ctx.closePath()
          circleColor2.border = '2px solid rgb(255, 255, 255)'
        }
      }
    }
  }
}

const setGreenLine = (ctx) => {
  ctx.beginPath()
  ctx.moveTo(30, 173)
  ctx.lineTo(78, 173)
  ctx.lineWidth = 10
  ctx.strokeStyle = 'rgb(8, 255, 66)'
  ctx.stroke()
  ctx.moveTo(265, 173)
  ctx.lineTo(218, 173)
  ctx.lineWidth = 10
  ctx.strokeStyle = 'rgb(8, 255, 66)'
  ctx.stroke()
  ctx.closePath()
}

//画后交输活门
const drawAftValve = (ctx) => {
  setGreenLine(ctx)
  ctx.beginPath()
  ctx.moveTo(79, 168)
  ctx.lineTo(79, 205)
  ctx.lineWidth = 10
  ctx.strokeStyle = 'rgb(8, 255, 66)'
  ctx.stroke()
  ctx.closePath()
  ctx.beginPath()
  ctx.arc(84, 205, 5, Math.PI * 0.5, Math.PI * 1, false)
  ctx.lineWidth = 10
  ctx.strokeStyle = 'rgb(8, 255, 66)'
  ctx.stroke()
  ctx.closePath()
  ctx.beginPath()
  ctx.moveTo(84, 210)
  ctx.lineTo(133, 210)
  ctx.lineWidth = 10
  ctx.strokeStyle = 'rgb(8, 255, 66)'
  ctx.stroke()
  ctx.moveTo(161, 210)
  ctx.lineTo(213, 210)
  ctx.lineWidth = 10
  ctx.strokeStyle = 'rgb(8, 255, 66)'
  ctx.stroke()
  ctx.closePath()
  ctx.beginPath()
  ctx.arc(213, 205, 5, Math.PI * 2, Math.PI * 0.5, false)
  ctx.lineWidth = 10
  ctx.strokeStyle = 'rgb(8, 255, 66)'
  ctx.stroke()
  ctx.closePath()
  ctx.beginPath()
  ctx.moveTo(218, 205)
  ctx.lineTo(218, 168)
  ctx.lineWidth = 10
  ctx.strokeStyle = 'rgb(8, 255, 66)'
  ctx.stroke()
  ctx.closePath()
  //画活门，先覆盖原页面
  ctx.beginPath()
  ctx.arc(146, 209, 15.5, Math.PI * 2, 0, false)
  ctx.fillStyle = 'rgb(27,27,31)' // 设置填充颜色
  ctx.fill() // 填充圆形
  ctx.closePath()
  ctx.beginPath()
  ctx.arc(146, 209, 14, Math.PI * 2, 0, false)
  ctx.lineWidth = 4
  ctx.strokeStyle = 'rgb(8, 255, 66)' // 设置填充颜色
  ctx.stroke()
  ctx.closePath()
  ctx.beginPath()
  ctx.moveTo(133, 210)
  ctx.lineTo(161, 210)
  ctx.lineWidth = 10
  ctx.strokeStyle = 'rgb(8, 255, 66)'
  ctx.stroke()
  ctx.closePath()
}

//画前交输活门
const drawFwdValve = (ctx) => {
  setGreenLine(ctx)
  ctx.beginPath()
  ctx.moveTo(79, 178)
  ctx.lineTo(79, 137)
  ctx.lineWidth = 10
  ctx.strokeStyle = 'rgb(8, 255, 66)'
  ctx.stroke()
  ctx.closePath()
  ctx.beginPath()
  ctx.arc(84, 137, 5, Math.PI * 1, Math.PI * 1.5, false)
  ctx.lineWidth = 10
  ctx.strokeStyle = 'rgb(8, 255, 66)'
  ctx.stroke()
  ctx.closePath()
  ctx.beginPath()
  ctx.moveTo(84, 132)
  ctx.lineTo(133, 132)
  ctx.lineWidth = 10
  ctx.strokeStyle = 'rgb(8, 255, 66)'
  ctx.stroke()
  ctx.moveTo(161, 132)
  ctx.lineTo(213, 132)
  ctx.lineWidth = 10
  ctx.strokeStyle = 'rgb(8, 255, 66)'
  ctx.stroke()
  ctx.closePath()
  ctx.beginPath()
  ctx.arc(213, 137, 5, Math.PI * 2, Math.PI * 1, true)
  ctx.lineWidth = 10
  ctx.strokeStyle = 'rgb(8, 255, 66)'
  ctx.stroke()
  ctx.closePath()
  ctx.beginPath()
  ctx.moveTo(218, 137)
  ctx.lineTo(218, 178)
  ctx.lineWidth = 10
  ctx.strokeStyle = 'rgb(8, 255, 66)'
  ctx.stroke()
  ctx.closePath()
  //画活门，先覆盖原页面
  ctx.beginPath()
  ctx.arc(146, 132, 15.5, Math.PI * 2, 0, false)
  ctx.fillStyle = 'rgb(27,27,31)' // 设置填充颜色
  ctx.fill() // 填充圆形
  ctx.closePath()
  ctx.beginPath()
  ctx.arc(146, 132, 14, Math.PI * 2, 0, false)
  ctx.lineWidth = 4
  ctx.strokeStyle = 'rgb(8, 255, 66)' // 设置填充颜色
  ctx.stroke()
  ctx.closePath()
  ctx.beginPath()
  ctx.moveTo(133, 132)
  ctx.lineTo(161, 132)
  ctx.lineWidth = 10
  ctx.strokeStyle = 'rgb(8, 255, 66)'
  ctx.stroke()
  ctx.closePath()
}

//画中左泵
const drawLeftPump = () => {
  //先设置泵的颜色
  leftPumpStyle.border = store.getters['fuel/cLeftPump']
    ? '3px solid rgb(8, 255, 66)'
    : '3px solid rgb(255, 255, 255)'
}

const drawRightPump = () => {
  rightPumpStyle.border = store.getters['fuel/cRightPump']
    ? '3px solid rgb(8, 255, 66)'
    : '3px solid rgb(255, 255, 255)'
}

const drawCanvas = () => {
  const canvas = canvasRef.value
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d')
    width = canvas.width
    height = canvas.height
    // 清除画布的所有内容
    ctx.clearRect(0, 0, width, height)

    ctx.beginPath()
    //画发动机1
    ctx.moveTo(8, 20)
    ctx.lineTo(42, 20)
    ctx.lineWidth = 2
    ctx.strokeStyle = 'rgb(8, 214, 255)'
    ctx.stroke()
    ctx.moveTo(3, 30)
    ctx.lineTo(47, 30)
    ctx.lineWidth = 2
    ctx.strokeStyle = 'rgb(8, 214, 255)'
    ctx.stroke()
    ctx.moveTo(8, 80)
    ctx.lineTo(42, 80)
    ctx.lineWidth = 2
    ctx.strokeStyle = 'rgb(8, 214, 255)'
    ctx.stroke()
    ctx.closePath()

    ctx.beginPath()
    ctx.arc(61, 50, 60, Math.PI * 1.17, Math.PI * (2 - 1.17), true) // 半径设置为 60，确保是像素值
    ctx.lineWidth = 2
    ctx.strokeStyle = 'rgb(8, 214, 255)'
    ctx.stroke()
    ctx.closePath()

    ctx.beginPath()
    ctx.arc(-11, 50, 60, Math.PI * 1.83, Math.PI * (2 - 1.83), false) // 半径设置为 60，确保是像素值
    ctx.lineWidth = 2
    ctx.strokeStyle = 'rgb(8, 214, 255)'
    ctx.stroke()

    ctx.moveTo(12, 80)
    ctx.lineTo(16, 90)
    ctx.lineTo(34, 90)
    ctx.lineTo(38, 80)
    ctx.lineWidth = 2
    ctx.strokeStyle = 'rgb(8, 214, 255)'
    ctx.stroke()

    //画发动机2
    ctx.moveTo(282, 20)
    ctx.lineTo(248, 20)
    ctx.lineWidth = 2
    ctx.strokeStyle = 'rgb(8, 214, 255)'
    ctx.stroke()
    ctx.moveTo(287, 30)
    ctx.lineTo(243, 30)
    ctx.lineWidth = 2
    ctx.strokeStyle = 'rgb(8, 214, 255)'
    ctx.stroke()
    ctx.moveTo(282, 80)
    ctx.lineTo(248, 80)
    ctx.lineWidth = 2
    ctx.strokeStyle = 'rgb(8, 214, 255)'
    ctx.stroke()
    ctx.closePath()

    ctx.beginPath()
    ctx.arc(229, 50, 60, Math.PI * 1.83, Math.PI * (2 - 1.83), false) // 半径设置为 60，确保是像素值
    ctx.lineWidth = 2
    ctx.strokeStyle = 'rgb(8, 214, 255)'
    ctx.stroke()
    ctx.closePath()

    ctx.beginPath()
    ctx.arc(301, 50, 60, Math.PI * 1.17, Math.PI * (2 - 1.17), true) // 半径设置为 60，确保是像素值
    ctx.lineWidth = 2
    ctx.strokeStyle = 'rgb(8, 214, 255)'
    ctx.stroke()

    ctx.moveTo(278, 80)
    ctx.lineTo(274, 90)
    ctx.lineTo(256, 90)
    ctx.lineTo(252, 80)
    ctx.lineWidth = 2
    ctx.strokeStyle = 'rgb(8, 214, 255)'
    ctx.stroke()
    if (!store.getters['fuel/cRightPump'] && !store.getters['fuel/cLeftPump']) {
      fontColor.color = '#FF7744'
    } else {
      fontColor.color = 'white'
    }

    const condition =
      store.getters['fuel/cRightPump'] ||
      store.getters['fuel/cLeftPump'] ||
      store.getters['fuel/lAftPump'] ||
      store.getters['fuel/lFwdPump'] ||
      store.getters['fuel/rAftPump'] ||
      store.getters['fuel/rFwdPump']
    if (store.getters['fuel/aftCrossValve']) {
      if (condition) {
        drawAftValve(ctx)
      } else {
        setAftValve(ctx)
      }
    }
    if (store.getters['fuel/fwdCrossValve']) {
      if (condition) {
        drawFwdValve(ctx)
      } else {
        setFwdValve(ctx)
      }
    }
    drawLeftPump()
    drawRightPump()
    drawFuelLine(ctx)
  }
}

/**
 * 覆盖原活门的css样式
 * @param ctx
 */
const setFwdValve = (ctx) => {
  ctx.beginPath()
  ctx.arc(146, 132, 15.5, Math.PI * 2, 0, false)
  ctx.fillStyle = 'rgb(27,27,31)' // 设置填充颜色
  ctx.fill() // 填充圆形
  ctx.closePath()
  ctx.beginPath()
  ctx.arc(146, 132, 14, Math.PI * 2, 0, false)
  ctx.lineWidth = 2
  ctx.strokeStyle = 'rgb(255, 255, 255)' // 设置填充颜色
  ctx.stroke()
  ctx.closePath()
  ctx.beginPath()
  ctx.moveTo(131, 132)
  ctx.lineTo(163, 132)
  ctx.lineWidth = 2
  ctx.strokeStyle = 'rgb(255, 255, 255)'
  ctx.stroke()
  ctx.closePath()
}

/**
 * 覆盖原活门的css样式
 * @param ctx
 */
const setAftValve = (ctx) => {
  ctx.beginPath()
  ctx.arc(146, 209, 15.5, Math.PI * 2, 0, false)
  ctx.fillStyle = 'rgb(27,27,31)' // 设置填充颜色
  ctx.fill() // 填充圆形
  ctx.closePath()
  ctx.beginPath()
  ctx.arc(146, 209, 14, Math.PI * 2, 0, false)
  ctx.lineWidth = 2
  ctx.strokeStyle = 'rgb(255, 255, 255)' // 设置填充颜色
  ctx.stroke()
  ctx.closePath()
  ctx.beginPath()
  ctx.moveTo(131, 210)
  ctx.lineTo(163, 210)
  ctx.lineWidth = 2
  ctx.strokeStyle = 'rgb(255, 255, 255)'
  ctx.stroke()
  ctx.closePath()
}
</script>

<style scoped>
.view {
  display: flex;
  width: 290px;
  height: 350px;
  position: relative;
  z-index: 10;
  /* 给背景加个颜色，方便看到 canvas */
}

/* Canvas的定位和样式 */
canvas {
  position: absolute;
  top: 0;
  left: 0;
}

.circle1,
.circle2 {
  width: 36px;
  height: 36px;
  border-radius: 100%;
  margin-left: 7px;
}

.circle1 {
  margin-top: 36px;
}

.circle2 {
  margin-top: 25px;
}

.total_font {
  margin-left: 5px;
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: rgb(8, 214, 255);
}

.total_fuel {
  display: flex;
  margin-left: 32px;
  margin-top: 20px;
  width: 140px;
  height: 45px;
  border: 2px solid rgb(8, 214, 255);
  border-radius: 8px;
}

.cross_feed {
  border-top: 2px solid white;
  border-left: 2px solid white;
  border-right: 2px solid white;
  height: 80px;
  width: 140px;
  /* position: relative; */
  border-radius: 5px;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
}

.cross_feed::before {
  content: '';
  /* 需要定义内容，否则伪元素无法显示 */
  position: absolute;
  left: 52px;
  width: 30px;
  height: 30px;
  /* 缺口的高度 */
  top: -15px;
  background-color: rgb(27, 26, 31);
}

.cross_bottom_1,
.cross_bottom_2 {
  position: absolute;
  height: 20px;
  width: 55px;
  top: 58px;
  border-bottom: 2px solid white;
}

.cross_bottom_1 {
  left: -2px;
  border-bottom-left-radius: 5px;
}

.cross_bottom_2 {
  left: 82px;
  border-bottom-right-radius: 5px;
}

.inner-box_1,
.inner-box_2 {
  width: 30px;
  height: 30px;
  border: 2px solid white;
  border-radius: 100%;
  position: absolute;
  /* 放置到中间 */
  left: 49%;
  transform: translate(-50%, -50%);
}

/* 内部盒子 */
.inner-box_1 {
  top: 0px;
}

.inner-box_2 {
  top: 76px;
}

.cross_line2,
.cross_line1 {
  position: absolute;
  width: 50px;
  height: 2px;
  background-color: white;
}

.cross_line1 {
  left: -50px;
}

.cross_line2 {
  right: -50px;
}

.inner-box_1::before,
.inner-box_2::before,
.inner-box_1::after,
.inner-box_2::after {
  top: 50%;
  transform: translateY(-50%);
  content: '';
  position: absolute;
  width: 2px;
  height: 26px;
  background-color: white;
}

/* 左竖线 */
.inner-box_1::before,
.inner-box_2::before {
  left: 8px;
}

/* 右竖线 */
.inner-box_1::after,
.inner-box_2::after {
  right: 8px;
}

.center_tank {
  width: 180px;
  height: 120px;
  border: 2px solid rgb(8, 214, 255);
  border-radius: 7px;
  margin-top: 2px;
  margin-left: 14px;
  background-color: rgb(66, 66, 82);
}

.center_l,
.center_2 {
  height: 35px;
  width: 50px;
  background-color: rgb(27, 26, 31);
}

.center_fuel_total {
  width: 70px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  font-size: 20px;
  margin-left: 52px;
  margin-top: 10px;
}
</style>
